<template>
	<Popup
		title="交换案例模板"
		btnText="我也要交换"
		@clickBtn="$emit('nextStep')"
		@close="$emit('close')"
	>
		<div class="guide">
			<div class="desc">这个乐高套装我玩腻啦，想和其他小朋友交换一下乐高套装玩具~有乐高套装的小朋友欢迎和我交换哦！</div>
			<div class="title">交换条件</div>
			<div class="exchange-value">乐高其他套装</div>
			<div class="imgs">
				<img
					v-for="src in imgs"
					:key="src"
					:src="src"
				>
			</div>
		</div>
	</Popup>
</template>

<script>
export default {
  data() {
    return {
      imgs: [
        'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/toys/20220312102747629-WechatIMG119 3 (1).png',
        'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/toys/20220312102747629-WechatIMG119 2 (1).png'
      ]
    }
  }
}
</script>

<style lang='scss' scoped>
.guide {
  width: 700px;
  padding: 0 65px;

  .desc {
    padding: 30px 0;
    line-height: 36px;
    color: #003e34;
  }

  .exchange-value {
    padding: 10px 0 20px;
    line-height: 36px;
    color: #003e34;
  }

  .imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;

    img {
      width: 100%;
    }
  }
}
</style>
